<template>
	<div class="detail common-layout">
		<el-form>
			<el-form-item>
				<el-input v-model="txt" placeholder="请输入内容"></el-input>
				<el-button @click="Search()">查找</el-button>
			</el-form-item>
		</el-form>
		<div class="detaillist">
			<ul>
				<li @click="getfind(0)">全部类型</li>
				<div v-for="it in arr" :key="it.id">
					<li @click="getfind(it.id)">{{it.type}}</li>
					<el-button type="text" v-for="item in it.child" :key="item.id" @click="getfind(item.id)">{{item.type}}</el-button>
				</div>
			</ul>
			<ol>
				<li v-for="it in findbooklist" :key="it.id">
					<img :src="`${$Imgurl}/showImg/${it.picture}`" />
					<article>
						<p v-html="it.name"></p>
						<p v-html="it.author"></p>
						<p v-html="it.publisher"></p>
						<p>
							￥{{it.price}}<button @click="buy(it)">购买</button>
						</p>
					</article>
				</li>
				<el-pagination :total="Math.ceil(total/num)*10" align="center" layout="prev , pager, next" v-model:currentPage="page"></el-pagination>
			</ol>
		</div>
	</div>
</template>

<script>
	import instance from '../../../../ajax'
	import { ElMessage } from 'element-plus'
	export default{
		name:'Detail',
		data(){
			return{
				txt:'',
				
				detaillist:[],
				arr:[],
				
				findbooklist:[],
				type:0,
				page:1,
				num:8,
				total:''
			}
		},
		created() {
			this.axios.get('/api/public/type/findAll2').then((res)=>{
				this.detaillist=res.data.data
				this.getarr(0,this.arr)
			}).catch((error)=>{
				
			})
			
			this.txt=this.$store.state.sea
			if (this.$route.query.key==1) {
				this.Search()
			}
		},
		methods:{
			getfind(i){
				this.type=i
				this.axios.get(`/api/public/findBookByPage/${this.page-1}/${this.num}/${this.type}`).then((res)=>{
					this.findbooklist=res.data.data.books
					this.total=res.data.data.total
				}).catch((error)=>{
					
				})
			},
			buy(obj){
				if(localStorage.getItem('role')=='P'){
					instance.get(`/api/public/addCart/${obj.id}`).then((res)=>{
						if (res.data.code==200) {
							ElMessage({
								showClose: true,
							    message: '已添加购物车',
							    type: 'success',
							  })
						}
					}).catch((error)=>{
						
					})
				}else{
					ElMessage({
						showClose: true,
					    message: '未登录，无法购买',
					    type: 'error',
					  })
				}
			},
			Search(){
				instance.post(`/api/public/book/findIf/${this.page-1}/${this.num}`,`key=${this.txt}`,{
					headers:{'Content-Type': 'application/x-www-form-urlencoded'},
				}).then((res)=>{
					if (res.data.code==200) {
						this.findbooklist=res.data.data.books
						this.total=res.data.data.total
					}
				}).catch((error)=>{
					
				})
			},
			getarr(id,arr){
				if (id==0) {
					this.detaillist.forEach(it=>{
						if (it.pid==0) {
							arr.push(it)
						}
					})
					this.getarr(this.arr[0].id,this.arr)
				} else{
					arr.forEach((it,i)=>{
						this.detaillist.forEach((val,key)=>{
							if (it.id==val.pid) {
								if(!it.child) it.child=[]
								it.child.push(val)
							}
						})
						if (it.child) {
							this.getarr(1,it.child)
						}
					})
				}
			}
		},
		watch:{
			page(){
				if (this.txt=='') {
					this.getfind(this.type)
				} else{
					this.Search()
				}
			}
		}
	}
</script>

<style scoped>
	.detail{
		width: 90%;
		margin: 10px auto;
	}
	.el-input{
		width: 30%;
	}
	
	.detaillist{
		width: 100%;
		display: flex;
	}
	.detaillist ul{
		width: 30%;
	}
	.detaillist ul li{
		line-height: 70px;
		color: gray;
		display: flex;
		justify-content: space-between;
	}
	.detaillist ul li{
		line-height: 70px;
		border-top: 1px solid gainsboro;
	}
	.detaillist ul li:hover{
		cursor:pointer;
	}
	.detaillist ol{
		width: 60%;
		padding-left: 5%;
	}
	.detaillist ol li{
		width: 48%;
		height: 250px;
		display: inline-block;
		padding-top: 10px;
		padding: 1%;
	}
	.detaillist ol li img{
		width: 42%;
		float: left;
	}
	.detaillist ol li article{
		width: 58%;
		padding-top: 20px;
		display: inline-block;
		float: right;
	}
	.detaillist ol li article p{
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.detaillist ol li article p:last-child{
		color: #FFA500;
		font-size: 25px;
	}
	.detaillist ol li article p button{
		margin-left: 15px;
		border: none;
		width: 50px;
		line-height: 30px;
		border-radius: 20px;
		background: orange;
		color: white;
	}
</style>
